<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>hello1</div>
    <div>hello2</div>

    <p class="text">Hello</p>

    <form name="login"></form>

    <div id="root"></div>

    <div class="nav">nav1</div>
    <div class="nav">nav2</div>


    <script>
        //getElementsByTagName方法搜索HTML标签名，返回一个类似数组的对象
        console.log(document.getElementsByTagName("div"));
        var div1 = document.getElementsByTagName("div")[0];
        div1.innerHTML = "Hello World";
        //getElementsByClassName方法返回一个数组对象
        var text = document.getElementsByClassName("text");
        text[0].innerHTML = "Hello!";
        //搜索name属性返回一个数组对象, 不常用
        console.log(document.getElementsByName("login"));
        //搜索id返回一个值而不是数组
        console.log(document.getElementById("root"));

        //
        var nav = document.querySelector(".nav");
        console.log(nav);
        var navs = document.querySelectorAll(".nav");
        console.log(navs);
        
        
    </script>


</body>
</html>